<template lang="">
  <!-- layout的二级路由的出口  -->
  <div class="app">
    <div class="page">
        <router-view></router-view>
    </div>
    <van-tabbar route class="tarbar" :v-model="active" active-color="#ee0a24" :fixed="false">
      <van-tabbar-item icon="home-o" to="/layout/home">首页</van-tabbar-item>
      <van-tabbar-item icon="search" to="/layout/category">分类</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o" to="/layout/cart" :badge="cartNum">购物车</van-tabbar-item>
      <van-tabbar-item icon="user-circle-o" to="/layout/my">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script setup lang="ts">
import { ref} from 'vue'
import {useUser} from "@/stores/user"
let userStore=useUser()
let cartNum=ref(0)
cartNum.value=userStore.cartNum
let active = ref(0)


</script>
<style lang="scss">
.app {
  height: 100vh;
  display: flex;
  flex-direction: column;

  .page {
    flex: 1;
    overflow: auto;
  }
}
</style>
